/*
 * @Author: sea 
 * @Date: 2020-05-02 07:09:33 
 * @Last Modified by: sea
 * @Last Modified time: 2020-05-02 07:49:33
 */

 /* 网格组件 */
.sea-grid{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
}

/* 网格中的格子 */
.sea-grid > .sea-grid-item{
    position: relative;
    flex: 1 1 33%;
    box-sizing: border-box;
    padding: 1.2rem 0;
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.sea-grid > .sea-grid-item:nth-child(3n){
    border-right: none;
}
/* 不需要边框时取消容器上的border */
.sea-grid.no-border{
    border: none;
}
.sea-grid.no-border > .sea-grid-item{
    border: none !important;
}

/* 两列网格 */
.sea-grid.sea-grid-2 .sea-grid-item{
    border-right: 1px solid #ddd;
    flex-basis: 50%;
    padding: 1.8rem 0;
}
.sea-grid.sea-grid-2  .sea-grid-item:nth-child(2n){
    border-right: none;
}
/* 四列网格 */
.sea-grid.sea-grid-4 .sea-grid-item{
    border-right: 1px solid #ddd;
    flex-basis: 25%;
    padding: 0.9rem 0;
}
.sea-grid.sea-grid-4  .sea-grid-item:nth-child(4n){
    border-right: none;
}
/* 五列网格 */
.sea-grid.sea-grid-5 .sea-grid-item{
    border-right: 1px solid #ddd;
    flex-basis: 20%;
    padding: 0.6rem 0;
}
.sea-grid.sea-grid-5  .sea-grid-item:nth-child(5n){
    border-right: none;
}